<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/my.css" />
		<style>
			table{
				width: 200px;
				border: 1px solid red;
		 
			}
			td{
				border: 1px solid red;
			}
			
			div#first{
				background-color: yellow;
			}
			
			div#second{
				background-color: yellowgreen;
			}
			div.third{ /*选择器取交集 ，满足是一个div 并且class=“third”*/
				 background-color: green;
				 color: black;
			}
			
			span.third{
				color:black;
			}
			
			h2,span,.third{
				color: red;
			}
			
		
	/*	     div span{
		     	color: goldenrod;
		     }*/
			
			
			   div>span{
		     	color: goldenrod;
		     }
			
			  a{
			  	color: gray;
			     text-decoration: none; /*没有下划线*/
			  }
			  a:hover{
			  	 color: gold;
			  }
			  a:visited{
			  	color: red;
			  }
			  
			  a:active{
			  	color: blue;
			  }
			  ul{
			  	width: 100px;
			  }
			  li:first-child{
			  	background-color: gray;
			  }
			  
			  #myspan+p{
			  	  background-color: gold;
			  }
			  [src]{    /*选中包含src属性的元素*/
			  		border: 1px solid gray;
			  }
			  
			  li[class="one"]{
			  	    font-size: 30px;
			  }
			  
			  li[class*="o"]{
			  	     color: green;
			  }
			  li[class^="t"]{
			  	   font-style: oblique;
			  }
			  li[class$="o"]{
			  	  background-color: greenyellow;
			  }
			  
		</style>
	</head>
	<body>
		<!-- 
			样式表基本语法：
			     选择器{
			     	样式名:样式值;
			     	样式名:样式值
			     }  
			     
			css选择器：
			  1、通用选择器 
			  	 *{
			  	  	
			  	  }
			  2、HTML中标签选择器
			      p{
			      	
			      }
			      table{
			      	
			      }
			      span{
			      	
			      }
			      ....
			      
			   3、id选择器  
			       #id{
			       	
			       	
			       }
			   4、类选择器  
			        .class{
			        	
			        }
			        
			    5、交集选择器 
			        选择器1选择器2{
			        	
			        }
			        
			        例如  div.thrid{
			        	
			        }
			      table.third{
			      	
			      }
			    6、并集选择器
			              选择器1,选择器2,选择器3{
			      	
			      }
			     h1,div,.third{
			     	
			     }
			     
			     7、后代选择器
			           父选择器 子选择器{
			     	
			     }
			     
			     父>子{
			     	
			     	
			     }
			  元素1+元素2{
			  	
			  	
			  }
			     8、伪类选择器
			                         对a标签：
				     a{
				     	
				     }
				     a:hover{
				     	
				     }
				     a:visited{
				     	
				     }
				     a:active{
				     	
				     	
				     }
				     
				     :first-letter  ： 选择标签的第一个字母
				     :first-line   选择第一行
				     :first-child   选择第一个字元素 
				     
	
				9 属性选择器 
				 《input type="text" name="username"/>
				   [属性名] : 选中包含属性名的元素
				   [属性名=""] :   选中包含属性名=值的元素   
				   		例如：  
				   		
				   		 [name="username"]{
				   		 	
				   		 	
				   		 }
				   [属性名^=""]  选中属性名以**开头的元素
				       [name^="u"]{
				   		 	
				   		 	
				   		 }
				   [属性名$=""]  属性名以** 结尾的元素
				       [name$="e"]{
				       	
				       }
				   [属性名*=""] 选中属性名中的只要包含内容的元素
				    [name*="n"]{
				       	
				       }
				   
		-->
		
		<table >
			<tr>
				<td>aaa</td>
				<td>bbb</td>
			</tr>
			<tr>
				<td>ccc</td>
				<td>ddd</td>
			</tr>
		</table>
		<div id="first">
			第一个div
		</div>
		<div id="second">
			第二个div
		</div>
		<div class="third">
			 第三个div
		</div>
		
		<span class="third">
			这是一个span元素
		</span>
		
		<h2>好好学习，天天向上</h2>
		<span>明天正常上课</span>
		
		<div>
			<span>span标签1</span>
			<p>p标签 <span>更多</span></p>
			<span>span标签2</span>
		 
		</div>
		
		<a href="#">点击我</a>
		
		<a href="http://www.baidus.com">百度</a>
		
		<a href="http://www.baiduss.com">百度</a>
		
		<ul>
			<li class="one">首页</li>
			<li class="two">商品管理</li>
			<li class="three">用户管理</li>
			<li class="four">新闻管理</li>
		</ul>
		
		<span id="myspan">span元素</span>
		<p>aaaaaaaaa</p>
		
		<img src="img/bg.jpg" />
		<img src="img/car001.PNG" />
	</body>
</html>
